<template>
    <div class="login">

        <a-card
                class="card"
                :style="{boxShadow: '#eee 20px 15px 105px',marginBottom: '20px',backgroundColor: '#f8f8f8'}"
                hoverable
        >
        <a-form  :model="form" :style="{width:'400px',marginTop: '70px'}" @submit="handleSubmit">
            <a-form-item field="username" label="账号" hide-asterisk="true"
                         :rules="[{required:true,message:'必须填写账号'},
                         {minLength:4,message:'账号长度最少4个字符'},
                         {maxLength:12,message:'账号长度不能超过12个字符'}]"
                         :validate-trigger="['change','input']"
                         validate-trigger="blur"
                         >
                <a-input v-model="form.username" placeholder="请输入用户名"/>
            </a-form-item>

            <a-form-item field="userPassword" hide-asterisk="true" label="密码"
                         :rules="[{required:true,message:'必须填写密码'},
                         {minLength:6,message:'密码长度最少6个字符'},
                         {maxLength:12,message:'密码长度最长12个字符'}]"
                         :validate-trigger="['change','input']"
                         validate-trigger="blur"
                        >
                <a-input-password v-model="form.userPassword" placeholder="请输入密码"/>
            </a-form-item >



            <a-form-item style="margin-left: 50%">
                <router-link to="/register" >还没有账号？注册</router-link>
            </a-form-item>

            <a-form-item >
                <a-button id="loginButton" html-type="submit" style="margin-left: 30%" type="primary" >登录</a-button>
            </a-form-item>

        </a-form>
        </a-card>
    </div>

</template>

<script setup>
    import {ref} from "@vue/reactivity";
    import myAxios from "../plugins/myAxios";
    import {useRoute} from "vue-router";
    import {useRouter} from "vue-router";
    import {reactive} from 'vue';
    import message from "@arco-design/web-vue/es/message";

    const route = useRoute();
    const router = useRouter();

    const form = reactive({
        username: '',
        userPassword: '',

    });


    const handleSubmit = async () => {
        const res = await myAxios.post('/user/login', {
            username: form.username,
            userPassword: form.userPassword
        })

        if (res.code === 0 && res.data) {
            message.success("登录成功！")
            const redirectUrl = route.query?.redirect ? route.query.redirect : '/';
            setTimeout(() => {
                window.location.href = redirectUrl
            }, 500);
        } else {
            message.error('登录失败！'+res.description?`${res.description}`:'')
        }
    };


</script>

<style scoped>
    .login {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 77vh;
    }
</style>
